import type { IconId } from '../../lib/icons/types/interfaces'
import type { PageType } from '../../lib/page_handler/type'
import { BUILD_CONFIG } from '../../types/constants'
import { ThemeType } from '../../types/interfaces'

export interface NavItem {
  id: string
  label: string
  path?: string
  iconType?: IconId
  children?: NavItem[]
  disabled?: boolean
  external?: boolean
}

export interface UserMenuItem {
  id: string
  label: string
  path?: string
  iconType?: IconId
  external?: boolean
  enabled?: boolean
}

/**
 * 导航栏分类配置类型
 */
export type NavbarCategoryMapping = {
  [key in PageType]?: {
    /** 对应导航菜单项的ID */
    menuId: string
    /** 是否需要在导航栏高亮 */
    highlight?: boolean
    /** 子菜单ID（如果有） */
    subMenuId?: string
  }
}

export interface NavbarProps {
  /**
   * 导航栏 ID
   */
  id: string
  /**
   * 导航项数据
   */
  items: NavItem[]
  /**
   * 当前激活的导航项ID
   */
  activeId?: string
  /**
   * 主题类型
   */
  theme?: ThemeType
  /**
   * 是否显示品牌LOGO
   */
  showBrand?: boolean
  /**
   * 品牌LOGO URL
   */
  brandLogo?: string
  /**
   * 品牌名称
   */
  brandName?: string
  /**
   * 品牌点击跳转地址
   */
  brandLink?: string
  /**
   * 是否显示用户菜单
   */
  showUserMenu?: boolean
  /**
   * 用户头像URL
   */
  userAvatar?: string
  /**
   * 用户头像点击跳转地址
   */
  userAvatarLink?: string
  /**
   * 用户名
   */
  userName?: string
  /**
   * 用户菜单项配置
   */
  userMenuItems?: UserMenuItem[]
  /**
   * 是否启用折叠功能
   */
  enableCollapse?: boolean
  /**
   * 初始折叠状态
   */
  initiallyCollapsed?: boolean
  /**
   * 折叠状态变化回调
   */
  onCollapseChange?: (collapsed: boolean) => void
  /**
   * 导航项点击回调
   */
  onItemClick?: (item: NavItem) => void
  /**
   * 用户菜单点击回调
   */
  onUserMenuItemClick?: (item: UserMenuItem) => void
}

export const DEFAULT_NAVBAR_PROPS: Partial<NavbarProps> = {
  theme: ThemeType.DARK,
  showBrand: true,
  brandName: BUILD_CONFIG.NAME,
  brandLogo: BUILD_CONFIG.IMAGE.LOGO_URL,
  showUserMenu: true,
  userName: '用户',
  userAvatar: BUILD_CONFIG.IMAGE.DEFAULT_AVATAR_URL,
  enableCollapse: true,
  initiallyCollapsed: false,
}
